<template>
    <el-form ref="suggestionRef" :model="publicForm">
        <el-row :gutter="20">
            <el-col :span="11">
                <el-alert :closable="false" :title="span" center show-icon type="warning"/>
            </el-col>
            <el-col :span="6">
                <el-form-item label="提出时间" prop="time">
                    <el-date-picker
                            v-model="publicForm.time"
                            :clearable="false"
                            end-placeholder="请输入结束时间"
                            range-separator="到"
                            start-placeholder="请输入开始时间"
                            type="daterange"
                            value-format="YYYY-MM-DD"
                    />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="处理状态" prop="context">
                    <el-select v-model="publicForm.status" placeholder="请输入处理意见">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="3" class="btn">
                <el-button :icon="Search" plain type="primary" @click="searchClick">搜索</el-button>
                <el-button :icon="Refresh" plain @click="reGet">重置</el-button>
            </el-col>
        </el-row>
    </el-form>
</template>

<script lang='ts' setup>
import { Refresh, Search } from '@element-plus/icons-vue'
import { adviseInit, threeOptions } from '@/config/formConfig'
import { onUnmounted, ref } from 'vue'
import { Advise } from '@/ts/type'
import { FormInstance } from 'element-plus'
import { Message } from '@/plugins/element'
import { EventBus } from '@/utils/mitt'
import { isEmpty } from '@/utils/commonUtils'

const span = ref<string>('该建议列表为匿名建议')
const suggestionRef = ref<FormInstance>()
const publicForm = ref<Advise>({ ...adviseInit })
const options = threeOptions
const searchClick = () => {
  const { context, status, time } = publicForm.value
  if (isEmpty(context as string) && isEmpty(status as string) && isEmpty(time as string[])) {
    return Message.warning('请至少输入一项内容')
  }
  EventBus.emit('adviseSearch', publicForm.value)
}

// 重置
const reGet = () => {
  publicForm.value = { ...adviseInit }
  EventBus.emit('reGetAdvise', false)
}

// 摧毁总线
onUnmounted(() => {
  EventBus.off('adviseSearch')
  EventBus.off('reGetAdvise')
})
</script>

<style lang='scss' scoped>
.el-col > .el-form-item {
  margin-bottom: 0;
}

.el-alert {
  letter-spacing: 0.5em;
}

.btn {
  padding: 0 15px;
  display: flex;
  justify-content: space-evenly;
}
</style>